
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd" >

<html>
<head>
<title>Sample Chat Application</title>
<style>
body {
	background-color: #eeeeee;
	padding:0;
	margin:0 auto;
	font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
	font-size:11px;
}
</style>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script src="../bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
  <script src="../js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
  <script src="../dynatree/jquery/jquery.cookie.js" type="text/javascript"></script>
  
  
  <script src="../Highcharts-2.2.5/js/highcharts.js"></script>
<script src="../Highcharts-2.2.5/js/modules/exporting.js"></script>
  
  <style>
  .ui-resizable-helper { border: 2px dotted #00F; }
  .ui-state-disabled { opacity: 1; filter: Alpha(Opacity=100); background-image: none; }
  </style>
<script>

	var chart,
        categories = ['0-4', '5-9', '10-14', '15-19',
            '20-24', '25-29', '30-34', '35-39', '40-44',
            '45-49', '50-54', '55-59', '60-64', '65-69',
            '70-74', '75-79', '80-84', '85-89', '90-94',
            '95-99', '100 +'];
	
	var chart2;
	
	var nb_widget_total;
	$(function() {
		/*****************************
		*     SCREEN MANAGEMENT      *
		******************************/
		var is_screen_locked=0;
		$("#lock_screen").on("mousedown", function() {
			if(is_screen_locked==0){
				$(this).html('<i class="icon-lock icon-white"></i> Screen Locked');
				$(this).removeClass("btn-success");
				$(this).addClass("btn-danger");
				is_screen_locked=1;
				$( ".modal" ).draggable( "disable" );
				$( ".modal" ).resizable( "disable" );
				$(this).removeClass("ui-state-disabled");
				
			}else{
				$(this).html('<i class="icon-off icon-white"></i> Lock Screen');
				$(this).removeClass("btn-danger");
				$(this).addClass("btn-success");
				is_screen_locked=0;
				$( ".modal" ).draggable( "enable" );
				$( ".modal" ).resizable( "enable" );
			}
		});
		
		/*****************************
		*     WIDGET MANAGEMENT      *
		******************************/
		//WIDGET: ONTOP sur click
		nb_widget_total = $(".modal").size();
		$(".modal").on("mousedown", function() {
			var what_zindex = parseInt($(this).css("z-index"));
			var widget_to_modify = $(this);
			$(".modal").each(function () {
				if ( parseInt($(this).css("z-index")) > what_zindex) {
				  $(this).css("z-index","-=1");
				}
				
			});
			widget_to_modify.css("z-index",nb_widget_total);
			/*alert(what_zindex);*/
		});
		//WIDGET: DRAGGABLE
		$( ".modal" ).draggable({ handle: ".modal-header" ,snap: ".modal", snapMode: "outer", snapTolerance: "10", helper: "ui-resizable-helper" });
		
		//WIDGET: REZISABLE
		$('.modal').resizable({
			maxHeight: 700,
			maxWidth: 700,
			minHeight: 100,
			minWidth: 200
		});
		
		//WIDGET TEST CONTENT CHARTS
		chart = new Highcharts.Chart({
            chart: {
                renderTo: 'widget1_container',
                type: 'bar'
            },
            title: {
                text: 'Population pyramid for Germany 2010'
            },
            subtitle: {
                text: 'Source: www.census.gov'
            },
            xAxis: [{
                categories: categories,
                reversed: false
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: categories,
                linkedTo: 0
            }],
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    formatter: function(){
                        return (Math.abs(this.value) / 1000000) + 'M';
                    }
                },
                min: -4000000,
                max: 4000000
            },
    
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
    
            tooltip: {
                formatter: function(){
                    return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+
                        'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            },
    
            series: [{
                name: 'Male',
                data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
                    -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
                    -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
            }, {
                name: 'Female',
                data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
                    3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
                    1447162, 1005011, 330870, 130632, 21208]
            }]
        });
		/*************** PIE **************/
		chart = new Highcharts.Chart({
            chart: {
                renderTo: 'widget2_container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
		/*alert(nb_widget_total);*/
	});
	</script>  
  

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="css/screen_ie.css" />
<![endif]-->

</head>
<body>
<div class="container">

	<div class="page-header">
		<h1>Widget Drop Helper <small>This application helps users to drop widgets as smoothly as possible </small></h1>
		</br>
		<a href="#" id="lock_screen" class="btn btn-success" style="">
		<i class="icon-off icon-white"></i> Lock Screen</a>
	</div>
  
	<div id="widget1" class="modal" style="position: absolute;  top:150px;left:800px;z-index: 1; height:500px;width: 500px;margin:0;overflow:hidden">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Widget 1: Charts - Bar</h3>
	  </div>
	  <div id="widget1_body" class="modal-body">

		<div id="widget1_container" style="width: 400px; height: 400px; margin: 0 auto; overflow:auto"></div>
	  </div>
	  
	</div>
	
	<div id="widget2" class="modal" style="position: absolute;  top:150px;left:250px;z-index: 1; height:500px;width: 500px;margin:0;overflow:hidden">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Widget 2: Chart - Pie</h3>
	  </div>
	  <div id="widget2_body" class="modal-body">

		<div id="widget2_container" style="width: 400px; height: 400px; margin: 0 auto; overflow:auto"></div>
	  </div>
	  
	</div>
	
	<div id="widget3" class="modal" style="position: absolute; top:200px;left:10px; z-index: 3; width: 200px;margin:0;overflow:hidden">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Widget 3</h3>
	  </div>
	  <div class="modal-body">
		<p>One fine body…</p>
	  </div>
	  
	</div>
	
	<div id="widget4" class="modal" style="position: absolute; top:400px;left:10px; z-index: 4; width: 200px;margin:0;overflow:hidden">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Widget 4</h3>
	  </div>
	  <div class="modal-body">
		<p>One fine body…</p>
	  </div>
	  
	</div>
  
<!-- YOUR BODY HERE -->

</div>



</body>
</html>